<template>
	<view class="bgDefault default-page">
		<tn-nav-bar fixed>文章详情</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 19 + 'px'}" style="padding-right: 7%;padding-left: 7%;" class="articleBox">
			<view class="titles">
				<view class="tit">{{detail.title}}</view>
				<view class="info">{{detail.created_at|parseTime}}</view>
			</view>
		
			<view class="conts">
				<zero-markdown-view :markdown="detail.content"></zero-markdown-view>
			</view>
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
			
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {detailObject} from '@/api/user/help.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				id:"",
				detail:{},
				loading:false
			}
		},
		onLoad(options) {
			this.id = options.id
			
			this.initData()
		},
		methods: {
			
			initData(){
				this.loading = true
				detailObject({id:this.id}).then(res=>{
					this.detail = res
					this.loading = false
				},err=>{
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.bgDefault{
		background: $tn-main-bg;
	}
	
	.default-page {
	  width: 100vw;
	  height: 100vh;
	  /* display: flex; */
	  align-items: center;
	  justify-content: center;
		font-family: "微软雅黑";
	}
	
	.articleBox{
		padding: 30rpx;
		.titles{
			.tit{font-size: 30rpx;font-weight: bold; text-align: center;}
			.info{font-size: 26rpx;color:#999;margin-top:10rpx;text-align: center;}
		}
		.img{margin: 40rpx 0;
			image{width: 100%;}
		}
		.preface{font-size: 26rpx;color:#999;margin-bottom: 40rpx;line-height: 40rpx;}
		.title{font-size:28rpx;font-weight: bold;margin-bottom: 40rpx;}
		.cont{font-size: 28rpx;color:#333;margin-bottom:30rpx;line-height: 40rpx;}
	}
</style>
